<template>
	<div class="create-page">
		<!--侧滑菜单容器-->
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<page-left-menu v-on:childByValue="checkProudctValue"></page-left-menu>
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-icon mui-icon-left-nav mui-pull-left callback-his" v-on:tap="goBacks()"></a>
					<h1 class="mui-title">新增家庭保障方案</h1>
				</header>
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper content-scorll">
					<div class="mui-scroll add-scroll">
						<div class="form-add-box">
							<template v-for="(item,$key) in memberInput">
								<div class="item-input-box-form">
									<div class="item-people-box" v-on:tap="hiddenBox($event)">
										<h3 class="item-people-box-title">受保人信息{{$key+1}} 
										<span class="del-people-span" v-if="$key" v-on:tap="delUser($key)">删除受保人</span>
										<div class="icon iconfont icon-select-up"></div> </h3>
										<form class="mui-input-group">
											<div class="mui-input-row">
												<label>姓名</label>
												<input type="text" class="mui-input-clear" v-model="item.clientName" placeholder="请输入您的姓名"/>
											</div>
											<div class="mui-input-row">
												<label>性别</label>
												<span class="sex-btn" :class="item.gender=='M'?'app-active':''" v-on:tap="item.gender='M' ">男</span>
												<span class="sex-btn" :class="item.gender=='F'?'app-active':''" v-on:tap="item.gender='F' ">女</span>
											</div>
											<div class="mui-input-row">
												<label>年龄</label>
												<input type="number" pattern="\d*" v-model="item.age" class="mui-input-clear" placeholder="请输入您的年龄"/>
											</div>
											<div class="mui-input-row">
												<label>是否吸烟</label>
												<span class="sex-btn" :class="item.isSmoker?'app-active':''" v-on:tap="item.isSmoker=true ">是</span>
												<span class="sex-btn" :class="!item.isSmoker?'app-active':''" v-on:tap="item.isSmoker=false ">否</span>
											</div>
										</form>
									</div>
									<div class="add-proudct-box" v-on:tap="showProudct($key)">
										选择产品
										<i class="right add-proudct-icon"></i>
									</div>
									<template v-for="(keys,$ind) in item.adviceDetailList">
										<div class="item-product-box">
											<h3 class="item-proudct-title">{{keys.title}} <span class="right del-product" v-on:tap="delProudct($key,$ind)">删除</span></h3>
											<form class="mui-input-group">
												<div class="mui-input-row">
													<label>选择币种</label>
													<div class="input-content" v-on:tap="selectCurrency(1,$key,$ind,keys.currencies)">{{keys.currencyname}}</div>
												</div>
												<div class="mui-input-row">
													<label>选择缴费年限</label>
													<div class="input-content" v-on:tap="selectCurrency(2,$key,$ind,keys.premiumYears)">{{keys.yearname}}</div>
												</div>
												<div class="mui-input-row" v-if="keys.category != 'HEAVY_RISK'">
													<label>年缴保费</label>
													<input type="number" pattern="\d*" v-model="keys.premium" class="mui-input-clear"/>
												</div>
												<div class="mui-input-row" v-if="keys.category == 'HEAVY_RISK'">
													<label>总保额</label>
													<input type="number" pattern="\d*" v-model="keys.totalCoverage" class="mui-input-clear"/>
												</div>
											</form>
										</div>
									</template>
								</div>
								
							</template>
							
						</div>
					</div>
					<div class="bottom-btn-box">
						<div class="left add-people-btn" v-on:tap="addPeople">新建受保人信息</div>
						<div class="right sumbit-plan-btn" v-on:tap="sumbitForm">生成方案</div>
					</div>
				</div>
			</div>
			<!-- off-canvas backdrop -->
			<div class="mui-off-canvas-backdrop"></div>
		</div>
	</div>
</template>
<script>
	import LeftMenu from '../../../components/tool/family/LeftMenu.vue'
	import {arranGement,creatApi,getCookie} from '../../../gloabl/common.js'
	import {api} from '../../../gloabl/api.js'
	export default{
		data:function(){
			return{
				temp_user:0,
				memberInput:[
					{
						clientName:'',
						gender:'M',
						age:30,
						isSmoker:false,
						adviceDetailList:[
							
						]
					}
				]
			}
		},
		components:{
			'page-left-menu':LeftMenu
		},
		mounted:function(){
			this.$nextTick(function(){
				document.getElementsByClassName('mui-inner-wrap')[0].addEventListener('drag', function(event) {
				　　event.stopPropagation();
				});
 				mui('#offCanvasSideScroll').scroll();
 				mui('#offCanvasContentScroll').scroll();
			})
			
		},
		methods:{
			sumbitForm(){//提交数据
				let me = this;
				let formdata =arranGement(this.memberInput);
				if(!formdata.success){
					mui.toast(formdata.message,3000);
					return;
				}
				
				mui.showLoading("生成中..","div");//遮罩层
				let sumbitdata =  JSON.stringify(formdata.data);
				
				let sid = JSON.parse(getCookie('user_info')).sid;
				let query = api.createFamilyPlan('"'+sid+'"',creatApi(sumbitdata));
				me.$http.post(url.graphql,{query:query}).then((res)=>{
					mui.hideLoading();
					me.$router.push({
						name:'FamilyPlan'
					})
				})
				.catch(function (error) {
					mui.alert('请求超时',3000)
				})
			},
			delUser(key){ //删除受保人
				let btnArray = ['是', '否'];
				let num = key+1;
				let me = this;
				mui.confirm('是否删除受保人'+num+'?', '小鹿健康', btnArray, function(e) {
					if (e.index == 0) {
						me.memberInput.splice(key,1);
					};
				})
			},
			hiddenBox(event){//折叠
			console.log(event)
				let obj = event.path[2];
				
				if(obj.classList.length!=1){
					obj.classList.remove('hide-active-box');
				}else{
					obj.classList.add('hide-active-box');
				}
			},
			addPeople(){//新增受保人
				let me = this;
				me.memberInput.push({
					clientName:"",
					gender:"M",
					age:30,
					isSmoker:false,
					adviceDetailList:[]
				});
				let obj = document.getElementsByClassName('item-input-box-form');
				for (let item of obj) {
					if(item.classList.length==1){
						item.classList.add('hide-active-box')
					}
				}
				mui('#offCanvasContentScroll').scroll().refresh();
				mui('#offCanvasContentScroll').scroll().scrollToBottom(0);
			},
			delProudct(user,key){ //删除产品
				let btnArray = ['是', '否'];
				let name = this.memberInput[user].adviceDetailList[key].title;
				let me = this;
				mui.confirm('是否删除'+name+'?', '小鹿健康', btnArray, function(e) {
					if (e.index == 0) {
						me.memberInput[user].adviceDetailList.splice(key,1);
					};
				})
			},
			selectCurrency(type,userKey,proudKey,data){ //初始化弹出选择器数据
				let array = [];
				if(type == 1){
					for (var i = 0; i < data.length; i++) {
						array.push({value:data[i].slug,text:data[i].name})
					}
				}else{
					for (var i = 0; i < data.length; i++) {
						if(data[i]=='-1'){
							array.push({value:data[i],text:'终身'})
						}else{
							array.push({value:data[i],text:data[i]+'年'})
						}
					}
				}
				let res= this.showPickerAction(type,userKey,proudKey,array);
			},
			showPickerAction(type,userKey,proudKey,data){
				 let me = this; 
				 let picker = new mui.PopPicker(); 
				 picker.setData(data); 
				 picker.show(function(item){
					if(type==1){
						me.memberInput[userKey].adviceDetailList[proudKey].currency = item[0].value;
						me.memberInput[userKey].adviceDetailList[proudKey].currencyname = item[0].text;
					}else{
						me.memberInput[userKey].adviceDetailList[proudKey].year = item[0].value;
						me.memberInput[userKey].adviceDetailList[proudKey].yearname = item[0].text;
					}
				 })
			},
			checkProudctValue:function(val){
				let me = this;
				let select = val.key_id;
				let data = val.data;
				let select_val = [];
				for (let id of select) {
					for (let item of data) {
						if(id===item.id){
							let sulg = item.currencies[0].slug;
							let sulg_name = item.currencies[0].name;
							for(let val of item.currencies){
								if(val.slug==='USD'){
									sulg = val.slug;
									sulg_name = val.name;
								}
							}
							let year = Math.min.apply(null, item.premiumYears);
							let yearName = Math.min.apply(null, item.premiumYears) + '年';
							select_val.push({
								productId:item.id,
								year:year,
								yearname:yearName,
								currency:sulg,
								currencyname:sulg_name,
								premium:'',
								totalCoverage:'',
								title:item.title,
								currencies:item.currencies,
								premiumYears:item.premiumYears,
								category:item.category
							});
						}
					}
				}
				me.memberInput[me.temp_user].adviceDetailList = select_val;
				mui('.mui-off-canvas-wrap').offCanvas().close();
			},
			showProudct(key){ //显示产品
				this.temp_user=key;
				mui('.mui-off-canvas-wrap').offCanvas().show();
			},
			goBacks(){//返回上一页
				window.history.back();
			}
		}
	}
	mui('.header').on('tap','a.callback-his',function(e){
		consoel.log(e)
	})
</script>
<style scoped="scoped">
	.del-people-span{
		padding: 6px 15px;
		border-radius: 4px;
		margin-left: 40px;
		color: #F08800;
		border: 1px solid #F08800;
		font-size: 12px;
	}
	.input-content{
		line-height: 40px;
		font-size: 14px;
	}
	.item-product-box{
		margin: 15px 0;
	}
	.del-product{
		padding: 6px 15px;
		color: #F08800;
		border: 1px solid #F08800;
		font-size: 12px;
		margin-top: -5px;
		border-radius: 4px;
	}
	.item-proudct-title{
		padding: 15px;
		margin: 0;
		font-size: 14px;
		font-weight: 500;
		background-color: #FFFFFF;
		border-bottom: 1px solid #DDDDDD;
	}
	.add-proudct-icon{
		width: 21px;
		height: 21px;
		background-image:url(../../../assets/images/tool/select-proudct.png);
		background-size: 21px 21px;
	}
	.add-proudct-box{
		width: 100%;
		padding: 12px;
		margin: 15px 0;
		background: #FFFFFF;
		border-radius: 2px;
	}
	.mui-input-group .mui-input-row:last-child::after{
		height: 0;
	}
	.mui-input-row .sex-btn:last-child{
		right: 20px;
	}
	.sex-btn{
		position: absolute;
		top: 5px;
		right: 90px;
		display: inline-block;
		border-radius: 4px;
		line-height: 26px;
		border: 0;
		outline: 0!important;
		background-color: transparent;
		-webkit-appearance: none;
		padding: 0 20px;
		border: 1px solid #DDDDDD;
	}
	.app-active{
		border: 1px solid #F08800;
		color: #F08800;
	}
	.item-people-box-title{
		padding: 15px;
		margin: 0;
		font-size: 16px;
		border-bottom: 1px solid #DDDDDD;
	}
	.item-people-box{
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 4px;
		margin-bottom: 15px;
	}
	.form-add-box{
		width: 100%;
		padding: 15px;
	}
	.bottom-btn-box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		font-size: 16px;
		-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
		z-index: 108;
	}
	.add-people-btn{
		width: 50%;
		padding: 20px 0;
		color: #F08800;
		float: left;
		text-align: center;
		background-color: #FFFFFF;
	}
	.sumbit-plan-btn{
		width: 50%;
		padding: 20px 0;
		color: #FFFFFF;
		float: left;
		text-align: center;
		background-color: #F08800;
	}
	.create-page{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.icon-select-up{
		width: 21px;
		float: right;
		height: 21px;
		font-size: 11px;
		margin-top: -5px;
		color: #F08800;
		line-height: 21px;
		text-align: center;
		background-color: #F5F5F5;
		border-radius: 50%;
	}
	.icon-select-up:before{
		content: "\E600";
	}
	.add-scroll{
		padding-bottom: 61px;
	}
	.hide-active-box .mui-input-group, .hide-active-box .add-proudct-box, .hide-active-box .item-product-box{
		visibility:visible; 
		opacity:0;
		display: none;
	}
	.hide-active-box .icon-select-up:before{
		content: "\E601";
	}
</style>